<script setup>

import {onMounted, reactive, ref} from "vue";
import store from "@/store";
import router from "@/router";
import {useRoute} from "vue-router";
import {add, cancel, dishPass, find, update} from "@/api/dish";
import {getMerchantById, searchMerchants} from "@/api/merchant";
import {open_error, open_success} from "@/utils/common";

const route = useRoute();

const formLabelWidth = "100px";


// 提交的表单
const data = ref({
  dishId: 0,
  image: " ",
  image_before: " ",
  dishName: "",
  merchantName: "",
  categoryId: 0, // 默认存0
  price: "",
  description: "",
  createTime: "",
  updateTime: "",
  delivery: false,
  pageNum: 1,
  pageSize: 5,
  merchantId: 0
});

const server_image = ref("");

const merchants = ref([]);

onMounted(() => {
  data.value.dishId = route.params.id;
  console.log(data.value.dishId);
  // 查询id的
  find(data.value).then((res) => {
    server_image.value = res.data.image;
    data.value = res.data;
  }).then(()=>{
    // 查询商家表格
    searchMerchants().then((res) => {
      merchants.value = res.data;
    });
    // 查询当前菜品对应的商家信息
    getMerchantById(data.value).then((res) => {
      data.value.merchantName = res.data.shopName;
    });
  });
});


const changeImg = (res) => {
  data.value.image_before = data.value.image;
  data.value.image = res.data;
  console.log(data.value.image);
}


// 提交当前更改
const commit_change = () => {
  if(data.value.image_before !== " " &&
      data.value.image_before !== "") {
    cancel(data.value.image_before);
  }
  data.value.id = route.params.id;
  data.value.updateTime = new Date().format("yyyy-MM-dd hh:mm:ss");
  console.log(data.value);
  update(data.value).then((res) => {
    console.log(res);
    router.push("/dishes");
  });
}



const clickPass = () => {
  const id_arrays = reactive([]);
  id_arrays.push(data.value.id);
  dishPass(id_arrays).then((res) => {
    if(res.state === 0) {
      open_success("操作成功");
      router.push("/dishes");
    } else {
      open_error(res.message);
    }
  })
}




const cancel_change = () => {
  router.push("/dishes");
}

</script>

<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">菜品详情</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><a href="/dishes">菜品列表</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>{{data.name}}菜品的详情页</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
      <el-form :model="data">
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              name="imageFile"
              action="/api/upload/image"
              :show-file-list="false"
              :on-success="changeImg"
          >
            <img v-if="data.image" :src="data.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="data.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属商铺" :label-width="formLabelWidth">
          <el-select v-model="data.merchantId" clearable placeholder="Select">
            <el-option
                v-for="item in merchants"
                :key="item.id"
                :label="item.shopName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="data.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="级别" :label-width="formLabelWidth">
          <el-select v-model="data.level" placeholder="请选择展示优先级">
            <el-option label="优先展示" :value="4" />
            <el-option label="推荐展示" :value="3" />
            <el-option label="放在中间" :value="2" />
            <el-option label="不推荐" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="data.description" autocomplete="off" type="textarea" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" plain @click="commit_change">提交修改</el-button>
          <el-button type="warning" plain @click="cancel_change">取消修改</el-button>
        </el-form-item>
        <el-divider content-position="left">审核通过</el-divider>
        <el-button v-if="data.status===0" type="success" @click="clickPass">通过审核</el-button>
        <el-button v-if="data.status!==0" type="success" :disabled="true">已通过审核</el-button>
      </el-form>
  </el-card>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>